import 'swiper/css'
import 'swiper/css/bundle'
import './MenuConfig.scss'

import { Button, App } from 'antd'
import { useState } from 'react'
import { useMount } from 'ahooks'
import { useRequest } from "alova/client"


import { EffectFade } from 'swiper/modules'
import { SaveFilled } from '@ant-design/icons'
import { Swiper, SwiperSlide } from 'swiper/react'

import { Http } from "../../Utils/Api"
import MenuConfigTable from '../../Page/MenuConfigTable'
import MenuConfigField from '../../Page/MenuConfigField'
import MenuConfigTopOptions from '../../Page/MenuConfigTopOptions'
import MenuConfigSort from '../../Page/MenuConfigSort'
import MenuConfigSearch from '../../Page/MenuConfigSearch'


import { menuStore, modelStore } from '../../Config/zustand'
import { DefaultTableConfig, DefaultTopOptionsConfig } from '../../Config'

const MenuConfig = ({ data, Off }) => {

    const { url } = data
    const { notification } = App.useApp()
    const [loading, setLoading] = useState(false)
    const {
        tableConfig, fieldConfig, topOptions, sortConfig, searchConfig,
        updateTableConfig, updateFieldConfig, updateTopOptions, updateSortConfig, updateSearchConfig
    } = menuStore()

    const { updateModel } = modelStore()

    const { send: getJson } = useRequest(params => Http({ url: 'getJSONData', params }), { immediate: false })
    const { send: posJson } = useRequest(params => Http({ url: 'posJSONData', params }), { immediate: false })


    const NavMapping = [
        { uuid: 0, title: '表格设置', after: '#f83600', before: '#f9d423', Temp: MenuConfigTable },
        { uuid: 1, title: '字段设置', after: '#f9d423', before: '#00c9ff', Temp: MenuConfigField },
        { uuid: 2, title: '头部操作', after: '#00c9ff', before: '#92fe9d', Temp: MenuConfigTopOptions },
        { uuid: 3, title: '排序设置', after: '#b721ff', before: '#21d4fd', Temp: MenuConfigSort },
        { uuid: 4, title: '搜索设置', after: '#21d4fd', before: '#e8198b', Temp: MenuConfigSearch },
        // { uuid:6, title: 'TABS', after: '#e8198b', before: '#c7eafd', Temp: SetSystemTABS },
        // { uuid: 7, title: 'BODY', after: '#c7eafd', before: '#f83600', Temp: SetSystemBODY },
    ]

    const [Active, setActive] = useState(0)
    const [InitSwiper, setInitSwiper] = useState()

    const onActive = (uuid) => {
        setActive(uuid)
        InitSwiper.slideTo(uuid)
    }

    const onSubmit = () => {
        const config = { tableConfig, fieldConfig, topOptions, sortConfig, searchConfig }
        posJson({ uuid: `Menu/${url}`, Content: JSON.stringify(config) }).then(() => {
            notification.success({ key: 'json', message: '操作成功', description: '配置文件保存成功!' })
            updateModel({})
            Off()
        })
    }

    useMount(() => {
        if (url) {
            getJson({ Uuid: `Menu/${url}` }).then(res => {
                const { tableConfig, fieldConfig, topOptions, sortConfig, searchConfig } = res
                updateTableConfig(tableConfig)
                updateFieldConfig(fieldConfig)
                updateTopOptions(topOptions)
                updateSortConfig(sortConfig)
                updateSearchConfig(searchConfig)
                setLoading(true)
            }).catch(() => {
                const initData = { tableConfig: DefaultTableConfig.data, fieldConfig: [], topOptions: DefaultTopOptionsConfig, sortConfig: [], searchConfig: [] }
                posJson({ uuid: `Menu/${url}`, Content: JSON.stringify(initData) }).then(() => {
                    updateTableConfig(DefaultTableConfig.data)
                    updateFieldConfig([])
                    updateTopOptions(DefaultTopOptionsConfig)
                    updateSortConfig([])
                    updateSearchConfig([])
                    setLoading(true)
                })
            })
        } else {
            console.log('先填写菜单路径')
        }
    })

    return (
        <div className='MenuConfig'>
            <div className='Left'>
                {NavMapping.map(({ uuid, title }) =>
                    <div
                        key={uuid}
                        onClick={() => onActive(uuid)}
                        className={`Nav ${Active === uuid ? 'active' : ''}`}
                    >
                        {title}
                    </div>
                )}
                <div
                    className='indicator'
                    style={{ top: Active * 48 + 12, background: `linear-gradient(130deg, ${NavMapping[Active].after}, ${NavMapping[Active].before})` }}
                />
                <div className='Submit'>
                    <Button size='large' block type='primary' icon={<SaveFilled />} onClick={onSubmit} />
                </div>
            </div>
            <div className='Right'>
                <Swiper
                    onSwiper={setInitSwiper}
                    modules={[EffectFade]}
                    noSwiping={true}
                    effect="fade"
                >
                    {NavMapping.map(({ uuid, Temp }) => (
                        <SwiperSlide key={uuid} className='swiper-no-swiping'>
                            {loading && <Temp url={url} />}
                        </SwiperSlide>
                    ))}
                </Swiper>
            </div>
        </div>
    );
};

export default MenuConfig;